<template>
  <div name="Login" id="Login">
    <el-card class="box-card">
      <el-form ref="form" :model="form">
        <el-form-item label="账号" label-width="40px">
          <el-input
            v-model="form.account"
            placeholder="请输入账号"
            clearable
            @clear="clearPassword"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="40px">
          <el-input
            show-password
            v-model="form.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" round class="btn" @click="handleLogin"
        >登录</el-button
      >
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Login",
  props: {},
  components: {},
  data() {
    return {
      form: {
        account: "",
        password: "",
      },
    };
  },
  created() {},
  methods: {
    clearPassword() {
      this.form.password = "";
    },
    handleLogin() {
      if (!this.form.account.trim() && !this.form.password) {
        return this.$message({
          type: "error",
          message: "请输入用户名或密码",
        });
      }
      this.loading = true;
      this.$store
        .dispatch("login", this.form)
        .then(() => {
          this.$router.push({ path: "/home" });
          this.loading = false;
          this.$message({
            type: "success",
            message: "登录成功！",
            duration: 1000,
          });
        })
        .catch(() => {
          this.loading = false;
          this.$message({
            type: "error",
            message: "用户名或密码错误",
          });
        });
    },
  },
  computed: {},
  mounted() {},
};
</script>

<style scoped>
#Login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/login.jpg");
  position: relative;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.box-card {
  width: 27em;
  height: 13em;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
}

.btn {
  transform: translate(40%);
  width: 15em;
  height: 3em;
}
</style>
